<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <h2>App</h2>
    <h3>foo: {{ foo }}</h3>
    <h3>bar: {{ bar }}</h3>
    <hr />

    <input type="text" placeholder="name" ref="inputRef" />
    <hr />

    <div>
      <h2>欢迎光临海底捞</h2>
      <div>请选择一位美女为你服务</div>
    </div>
    <div>
      <span
        class="select-btn"
        v-for="(item, index) in girls"
        :key="index"
        @click="selectGirlFun(index)"
      >{{ index }} : {{ item }}</span>
    </div>
    <div>你选择了【{{ selectGirl }}】为你服务</div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  ref,
  reactive,
  toRefs
} from "vue";

interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  },
  setup() {
    // const girls = ref(["大脚", "刘英", "晓红"]);
    // const selectGirl = ref<string>("");
    // const selectGirlFun = (index: number) => {
    //   selectGirl.value = girls.value[index];
    // };
    console.log("1-开始创建组件-----setup()");
    const data: DataProps = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      }
    });
    const refData = toRefs(data);

    const state = reactive({
      foo: "a",
      bar: "b"
    });

    const stateAsRefs = toRefs(state);

    setTimeout(() => {
      state.foo += "++";
      state.bar += "++";
    }, 2000);

    const inputRef = ref<HTMLElement | null>(null);

    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
    });

    onMounted(() => {
      inputRef.value && inputRef.value.focus();
      console.log("3-组件挂载到页面之后执行-----onMounted()");
    });
    onBeforeUpdate(() => {
      console.log("4-组件更新之前-----onBeforeUpdate()");
    });

    onUpdated(() => {
      console.log("5-组件更新之后-----onUpdated()");
    });

    return {
      ...refData,
      ...stateAsRefs,
      inputRef,

      // foo2,
      // bar2
    };
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.select-btn {
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #999999;
  cursor: pointer;
  user-select: none;
}
</style>
